<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1{width: 100px; height: 100px; background-color: red;position: absolute; left:200px; top: 50px;}
		#div2{width: 1px; height: 300px; background-color: #000;position: absolute; left: 600px; top: 0;}
		#div3{width: 1px; height: 300px; background-color: red;position: absolute; left: 650px; top: 0;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');
		var iSpeed = 0;
		var timer = null;
		var L = 0;

		timer = setInterval(function (){
			/*if (oDiv.offsetLeft < 600) {
				iSpeed +=(600 - oDiv.offsetLeft)/100;
			} else{
				iSpeed -=(oDiv.offsetLeft - 600)/100;
			};		两句其实就是一句话*/
			iSpeed +=(600 - oDiv.offsetLeft)/5;
			iSpeed = iSpeed*0.7;
			L += iSpeed;		//为什么下面的style.left就是L呢		// 因为L = oDiv.offsetLeft + iSpeed，这也是弹性运动独特的特点
			//document.getElementsByTagName('p')[0].innerHTML += L+' , ';

			oDiv.style.left = L + 'px';		//由于style.left他只认整数，这会导致几乎每一次都会舍去小数（这就是第一次误差），当进行到下一次时又要舍去小数部分（第二次误差），所以一般情况下的最终结果都会与预期目标相差1px。所以我们可以用变量先存下(也将误差保留了下来)，让位置等于一个变量L,每一次改变的只是变量L的值，浏览器再去根据L的值舍去小数，这样运动的过程也更加理想

			if (Math.abs(iSpeed) < 1 && Math.abs(L - 600)<1) {
				//iSpeed = 0;	//可以不要
				oDiv.style.left = 600 + 'px';
				clearInterval(timer);
			};

			
			//测试
			document.title = iSpeed;					//无限的小数
			oDiv.innerHTML = oDiv.offsetLeft;			//599。问题所在看上方
		},30)
	}
	</script>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
	<p></p>
</body>
</html>